<template>
	<view class="content">
        <u-navbar bgColor="#fff" :fixed="true" :shadow="true" :safeAreaInsetTop="true" :placeholder="true"
            @leftClick="back" title="人员考勤" rightIcon="search" @rightClick="rightClick">
        </u-navbar>

        <view class="uni-area">
            <!-- 考勤概览 -->
            <view class="u-m-t-40 uni-shadow u-p-b-20">
                <text class="font-bold">考勤概览</text>
                <view class="u-m-t-20 u-flex u-row-around">
                    <view v-for="(item,index) in overviews" :key="index"
                        class="u-flex u-flex-col">
                        <text class="u-m-b-14 u-font-24 uni-dec-color">{{item.title}}</text>
                        <text class="u-font-42 font-bold uni-higt-color">{{item.value}}</text>
                    </view>
                </view>
            </view>

            <!-- 人员列表 -->
            <uni-item-member v-for="(tem,ind) in page.list" :key="ind" :listItem="tem" 
                class="u-m-t-30" @memberDetail="memberKaoqinDetail(tem.id)" />

            <!-- 返回顶部 -->
            <u-back-top :scroll-top="page.scrollTop"  @tap="toTop"></u-back-top>
            <!-- 加载更多 -->
            <u-loadmore :status="page.status" />
        </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                gcbh: null, // 项目编号
                bzid: null, // 班组id
                // 人员考勤概览
                overviews:[
                    { field:'staffs', title:'实名制总人数', value: 0 },
                    { field:'istaffs', title:'进场总人数', value: 0 },
                    { field:'atdStaffs', title:'今日考勤数', value: 0 },
                    { field:'atdRate', title:'今日考勤率', value: '100%' },
                ],
                paging:{
                    pageNum: 1,
                    pageSize: this.$config.pageSize,
                },
                page:{
                    scrollTop: 0,
                    status: 'loading',
                    total: 0,
                    list: [], // 列表
                },
			}
		},

		onLoad(option) {
            this.gcbh = option.gcbh
            this.bzid = option.bzbh
            this.getMemberKaoqinOverview()
            this.getKqMemberList()
		},

        onPageScroll(e) {
            this.page.scrollTop = e.scrollTop;
        },
        onReachBottom(){
            if( this.page.list.length < this.page.total ){
                this.paging.pageNum += 1
                this.page.status = 'loading'
                this.getKqMemberList()
            }else{
                this.page.status = 'nomore'
            }
        },

		methods: {
            // 返回
            back(){
                uni.navigateBack()
            },
            // 搜索
            rightClick(){
                uni.navigateTo({ url: '/pages/common/search?type=member&assist=kaoqin' })
            },
            // 人员考勤详情
            memberKaoqinDetail(rybh){ // rybh人员编号
                uni.navigateTo({ url: '/pages/attendance-bag/particulars?bzid='+this.bzid+'&rybh='+rybh })
            },


            // 人员考勤概览
            getMemberKaoqinOverview(){
                uni.showLoading({ title:'人员考勤概览' })
                this.$request(this,this.$apis.kqMemberOverview,{gcbh:this.gcbh,bzbh:this.bzid}).then(res=>{
                    // console.log('人员考勤概览',res)
                    this.overviews.map((v,i)=>{
                        v.value = res[v.field]
                    })
                }).then()
            },
            // 考勤人员列表
            getKqMemberList(gcbh,bzbh){
                const obj1 = { gcbh:this.gcbh,bzbh:this.bzid }
                const obj2 = this.paging
                const prameter = Object.assign(obj1,obj2)
                // console.log( '考勤列表参数',prameter )
                this.$request(this,this.$apis.kqMemberList,prameter).then(res=>{
                    // console.log('人员列表',res)
                    this.page.total = res.total
                    if( res.total && res.total != 0 ){
                        this.status = 'loadmore'
                        res.data.map((v,i)=>{
                            this.page.list.push(v)
                        })
                    }else{
                        this.page.total = 0
                        this.page.status = 'nomore'
                        this.$tools.uToast(this,'default','','暂未查询到更多人员相关数据',3000)
                    }
                }).then()
            },

            // 返回顶部
            toTop(){
                uni.pageScrollTo({ scrollTop: 0,  duration: 300 })
            }
		}
	}
</script>

<style scoped lang="scss">
    // .content{}
</style>
